import React from "react";
import BaseComponent from "../../../redare/components/BaseComponent";
import {Form, Input, Modal} from "antd";
import RoleSelect from "../../../redare_components/webplatform_workbench/components/role/RoleSelect";
import UserPresenter from "../../../.gen/presenter/UserPresenter";

export default class ModifyRoleModal extends BaseComponent{

    formRef = React.createRef();

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            loading: false
        };
        this.presenter = new UserPresenter(this)
    }

    getCurUser(id) {
        this._form.userId = id;
        this.presenter.getUser(
            {id},
            {},
            (result) => {
                let {data} = result;
                if (data) {
                    this.formRef.current.setFieldsValue({
                        roleIds: data.roleIdList,
                        account: data.account
                    })
                }
            }
        )
    }

    _modify() {
        this.formRef.current.validateFields()
            .then(values => {
                this.setButtonLoading(true);
                let {userId} = this._form;
                values.accountId = userId;
                values.replace = true;
                this.presenter.updateUserRole(
                    values,
                    {},
                    () => {
                        this._successCallback("角色修改")
                    },
                    () => {
                        this.setButtonLoading(false)
                    }
                )
            })
    }

    render() {
        return (
            <Modal
                title="角色修改"
                visible={this.state.visible}
                confirmLoading={this.state.loading}
                onOk={this._modify.bind(this)}
                onCancel={() => this.setModalVisible(false)}
                centered={true}
                destroyOnClose={true}
                maskClosable={false}
                okText={'确定'}
                cancelText={'取消'}
            >
                <div className="TheNewPosition">
                    <Form ref={this.formRef}>
                        <Form.Item label="账号" name="account">
                            <Input disabled={true}/>
                        </Form.Item>
                        <Form.Item label="角色" name="roleIds" rules={[{required: true, message: '角色不能为空'}]}>
                            <RoleSelect platform="root" onValueChange={this._onRoleValueChange.bind(this)}/>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        );
    }

    _show(id) {
        this.getCurUser(id);
        this.setModalVisible(true)
    }

    setModalVisible(visible) {
        this.setState({visible})
    }

    setButtonLoading(loading) {
        this.setState({loading})
    }

    _onRoleValueChange(value) {
        this.formRef.current.setFieldsValue({roleIds: value})
    }

    _successCallback(content) {
        this.toastSuccess(`${content}成功`);
        this.setButtonLoading(false);
        this.setModalVisible(false);
        if (this.props.refresh) {
            this.props.refresh()
        }
    }
}